<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!--  <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />-->
        <link href="./resources/css/cssInfoShop.css" rel="stylesheet" type="text/css" />
        <title>#{msgs.tituloAplicacion}</title>
    </h:head>

    <h:body>
        <div id="general">
            <div id="top">
                <ui:insert name="top">
                    <table style="min-height: 120px" width="100%" border="0">
                        <tbody>
                            <tr>
                                <td width="20%"><img src="resources/ordenador.png" alt="empresa infoshop logo"/></td>
                                <td class="fuente_grande" align="center" width="60%">#{msgs.nombreTienda}</td>
                                <td  width="20%">
                                    <h:panelGrid  rendered="#{cliente.logged==false}">
                                        <h:form  id="loginForm">
                                            <table>
                                                <thead></thead>
                                                <tbody>
                                                    <tr> <td> #{msgs.usuario} </td> <td> <h:inputText id="usuario" value="#{login.usuario}" required="true" requiredMessage="El campo Usuario es obligatorio."/> </td> </tr>
                                                    <tr> <td> #{msgs.password} </td> <td> <h:inputSecret id="password" value="#{login.password}" required="true" requiredMessage="El campo Password es obligatorio." /> </td> </tr>
                                                </tbody>
                                            </table>
                                            <h:commandButton disabled="#{cliente.logged==true}" value="Log In" action="#{login.login}"/>
                                        </h:form>
                                        <h:message styleClass="mensajeSmall" for="usuario" />
                                        <h:message styleClass="mensajeSmall" for="password" />
                                        <h:message styleClass="mensajeSmall" for="loginForm" />

                                    </h:panelGrid>
                                    <h:panelGrid rendered="#{cliente.logged==true}">
                                        <h:outputText style="color:white" value="#{msgs.bienvenido}, #{cliente.cliente.nombre}"/><br></br>
                                        <h:form>
                                            <h:commandButton disabled="#{cliente.logged==false}" value="Log Out" action="#{login.logout}"/>
                                        </h:form>
                                    </h:panelGrid></td>
                            </tr>
                        </tbody>
                    </table>
                </ui:insert>
            </div>
            <div id="enlaces">
                <div class="textoCentrado" >
                    <h:form >
                        <h:commandButton styleClass="botonEnlaces" action="inicio" value="#{msgs.inicio}" ></h:commandButton>
                        <h:outputLabel value=" | "/>
                        <h:commandButton styleClass="botonEnlaces" action="busqueda" value="#{msgs.busquedas}"></h:commandButton>
                        <h:outputText rendered="#{cliente.logged==true}" value=" | "/>
                        <h:commandButton styleClass="botonEnlaces" rendered="#{cliente.logged==true}" action="datosCliente" value="#{msgs.datosCliente}"></h:commandButton>
                        <h:outputText rendered="#{cliente.logged==false}" value=" | "/>
                        <h:commandButton styleClass="botonEnlaces" rendered="#{cliente.logged==false}" action="altaCliente" value="#{msgs.altaCliente}"></h:commandButton>
                        <h:outputText rendered="#{cliente.logged==true}" value=" | "/>
                        <h:commandButton styleClass="botonEnlaces" rendered="#{cliente.logged==true}" action="editarCliente" value="#{msgs.editarCliente}"></h:commandButton>
                        <h:outputText rendered="#{cliente.logged==true}" value=" | "/>
                        <h:commandButton styleClass="botonEnlaces" rendered="#{cliente.logged==true}" action="#{historicoVentas.buscaHistorico}" value="#{msgs.misCompras}"></h:commandButton>
                    </h:form>
                </div>
            </div>
            <div id="center">
                <div id="left">
                    <ui:insert name="left">
                        <h:form>
                            <h:dataTable value="#{categoria.categoriaItems}" var="item">
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{msgs.categoria}"/>
                                    </f:facet>
                                    <h:commandButton styleClass="botonEnlacesLat" value="#{item.categoria}" action="#{categoria.productList}">
                                        <f:param name="categoriaSelected" value="#{item.id}"/>
                                    </h:commandButton>
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </ui:insert>
                </div>
                <div id="right">
                    <ui:insert name="right">
                        <h:panelGrid rendered="#{cliente.logged==true}">
                            <h:form>
                                <h:dataTable value="#{carrito.carrito.carroCompra}" var="item">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="#{msgs.numProductos}"/>
                                        </f:facet>
                                        <h:outputText value="#{item.cantidad}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="#{msgs.referenciaAbr}"/>
                                        </f:facet>
                                        <h:outputText value="#{item.producto.referencia}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="#{msgs.subtotalAbr}"/>
                                        </f:facet>
                                        <h:outputText value="#{item.cantidad*item.producto.precio}€">
                                            <f:converter converterId="jftf.BigDecimalConverter"/>
                                        </h:outputText>
                                    </h:column>
                                </h:dataTable>
                                <div class="negritaSeparada">
                                    <h:outputText value="#{msgs.total}: #{carrito.importeTotal}€">
                                        <f:converter converterId="jftf.BigDecimalConverter"/>
                                    </h:outputText>
                                </div>
                                <div class="negritaSeparada" align="center">
                                    <h:commandButton image="resources/carro.jpg" alt="#{msgs.altImagenCarro}" action="verCarrito">
                                    </h:commandButton>
                                </div>
                            </h:form>
                        </h:panelGrid>
                    </ui:insert>
                </div>
                <div id="content" class="right_content">
                    <ui:insert name="content">
                        <div class="imagenTienda" align="center">
                            <img alt="#{msgs.nombreTienda}" src="resources/infoshop.gif"/>
                        </div>
                        <div class="textoTienda" align="center">
                            <h:outputLabel value="#{msgs.textoTienda}"/>
                        </div>
                        <div>

                        </div>
                    </ui:insert>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <p align="right">
                        #{msgs.textoPie}
                        <img style="border:0;width:58px;height:20px"
                             src="./resources/vcss.gif"
                             alt="¡CSS Válido!" />
                        <img style="border:0;width:58px;height:20px"
                             src="./resources/wcag1A.gif"
                             alt="Conformidad W3C A" />
                    </p>
                </ui:insert>
            </div>
        </div>
    </h:body>

</html>
